<template>
  <a :href="recommendList[0].website"
    rel="dofollow"
    target="_blank"
    class="tool-recommend relative flex items-center px-3 py-2 gap-4 border border-purple-1300 rounded-md group overflow-hidden"
    @click="handleExp">
    <div class="flex recommend-pic items-center justify-center skeleton-bg flex-shrink-0"
      ref="imgBox">
      <common-image class="w-full h-full flex-shrink-0"
        :src="recommendList[0].image ? $vResetPic(recommendList[0].image, 220) : 'https://cdn.toolify.ai/default.webp'"
        :alt="$websiteName(recommendList[0])"
        :lazyLoad="false"></common-image>
    </div>
    <div class="flex-1 w-0">
      <div class="text-sm text-gray-1000 truncate break-words group-hover:text-purple-1300 pr-20">{{recommendList[0].name}}</div>
      <p class="mt-1 text-xs text-gray-1000 break-words line-2">{{recommendList[0].description}}</p>
    </div>
    <div class="absolute top-0 right-0 py-1 px-3 text-white text-xs rounded-bl-md bg-purple-1300">{{$t('detail_featured')}}</div>
  </a>
</template>

<script>
import mixinsExposure from '~/mixins/mixins-exposure'
import _ from 'lodash'
import { mapActions } from 'vuex'
export default {
  name: 'ToolDetailRecommend',
  props: {
    recommendList: {
      type: Array | null,
      default: () => {
        return []
      },
    },
  },
  mixins: [mixinsExposure],
  created() {
    //console.log(this.recommendList)
  },
  methods: {
    ...mapActions(['exposure']),
    handleExp: _.throttle(function () {
      let exporeData = this.getExporeData(
        this.recommendList[0],
        null,
        null,
        false,
        {
          target_url: this.recommendList[0].website,
          page_position: 'Featured',
        }
      )
      this.exposure({
        ...exporeData,
      })
    }, 2000),
  },
}
</script>
<style lang='scss' scoped>
.tool-recommend {
  width: 100%;

  .recommend-pic {
    width: 110px;
    height: 50px;
  }
}
@media (min-width: 640px) {
  .tool-recommend {
    max-width: 375px;
  }
}
</style>